<template>
  <div>
    <el-card class="main_card">
      <el-row>
        <el-col :span="8">
          <el-input placeholder="请输入体检者名称" clearable v-model="queryInfo.queryString" @clear="findPage">
            <el-button slot="append" icon="el-icon-search" @click="findPage" />
          </el-input>
        </el-col>
        <el-col :span="2">
          <el-button style="margin-left: 10px" @click="insert"  v-hasPermi="['PRE_INSERT']" type="primary">添加体检报告</el-button>
        </el-col>
        <el-button style="margin-left: 0px" @click="printPDF"   type="primary">打印血压检测报告</el-button>
      </el-row>
      <el-table :data="tableList"
                stripe v-loading="loading"
                element-loading-text="玩命加载中"
                element-loading-spinner="el-icon-loading">
        <el-table-column type="index" label="序号" />
        <el-table-column prop="low" label="舒张压（mmHG）" />
        <el-table-column prop="high" label="收缩压（mmHG） "/>
        <el-table-column prop="createTime" label="体检时间"/>
        <el-table-column prop="people" label="体检者"/>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope" >
            <el-button type="primary"  @click="update(scope.row)" v-hasPermi="['PRE_UPDATE']" icon="el-icon-edit" circle/>
            <el-button type="danger" @click="deleteById(scope.row.id)" v-hasPermi="['PRE_DELETE']" icon="el-icon-delete" circle/>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-if="total>0"
        @size-change="handlePageSize"
        @current-change="handlePageNumber"
        :current-page="queryInfo.pageNumber"
        :page-sizes="[7, 15, 50, 100]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"/>

    </el-card>
    <!--表单添加修改-->
    <el-dialog :title="title" :visible.sync="open" width="40%" @close="dialogClose">
      <el-form :model="form" ref="form" :rules="rules">
        <el-form-item label="舒张压（mmHG）"  prop="low">
          <el-input v-model="form.low" />
        </el-form-item>
        <el-form-item label="收缩压（mmHG）" prop="high">
          <el-input v-model="form.high" />
        </el-form-item>
        <el-form-item label="体检者" prop="people">
          <el-input v-model="form.people" />
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="clickCancel">取 消</el-button>
        <el-button type="primary" @click="clickOK">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
export  default {
    data(){
        return{
            //分页查询条件
            queryInfo:{
                //页码
                pageNumber:1,
                //页数
                pageSize:7,
                //关键字
                queryString:null
            },
            //表格数据
            tableList:[],
            //总记录数
            total:0,
            //表单的标题
            title:null,
            //是否打开对话框
            open:false,
            //加载
            loading:false,
            //表单数据
            form:{},
            //表单校验
            rules:{
              low:[
                    { required: true, message: '请输入舒张压（mmHG）', trigger: 'blur' },
                ],
              high:[
                    {required: true, message: '请输入收缩压（mmHG）', trigger: 'blur'},
                ],
              people:[
                  {required: true, message: '请输入体检者姓名', trigger: 'blur'},
                  {min: 1, max:5 ,message:'请输入正常姓名',trigger: 'blur' }

                ],
            }
        }
    },
    /*页面初始化调用方法*/
    created() {
        this.findPage();
    },
    methods:{
        insert(){
            this.title='新增血压体检报告';
            this.open=true;
        },
        update(row){
            this.form=row;
            this.title='修改血压体检报告';
            this.open=true;
        },
        /*分页查询*/
        findPage(){
            this.loading=true;
            this.$ajax.post('/food/blood/findPage',this.queryInfo).then((res)=>{
                this.loading=false;
                this.tableList=res.data.data.rows;
                console.log(res.data.data,"1")
                this.total=res.data.data.total;
            });
        },
        /*页码改变事件*/
        handlePageNumber(newPageNumber){
            //将分页的新数据赋值给分页参数
            this.queryInfo.pageNumber=newPageNumber;
            //调分页的方法
            this.findPage();
        },
        /*页数改变的事件*/
        handlePageSize(newPageSize){
            this.queryInfo.pageSize=newPageSize;
            this.findPage();

        },
        deleteById(id){
            this.$confirm('您将删除编号为('+id+')的数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //调后端的退出接口
                this.$ajax.delete(`/food/delete/blood/${id}`).then((res)=>{
                    this.$message.success(res.data.message);
                    this.findPage();
                    this.queryInfo.pageNumber=1;
                });

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        /*关闭对话框的事件*/
        dialogClose(){
            this.$refs.form.resetFields();
        },
        /*点击取消*/
        clickCancel(){
            this.form={};
            this.open=false;
            this.findPage();
        },
        /*点击确定*/
        printPDF(){

            this.$ajax.get('/tool/print').then((res) => {
                console.log(this.queryInfo,"111111")
                console.log(res,"sasa")
                window.open(  `http://localhost:8088/tool/pdf/print?query=` +this.queryInfo.queryString );
            })
        },
        clickOK(){
            //进行表单校验
            this.$refs.form.validate((valid)=>{
                //校验不通过
                if(!valid) return this.$message.error('表单校验不通过，请检查后提交！');
                //校验通过
                if(this.form.id===undefined || this.form.id===null){
                    this.$ajax.post('/food/insert/blood',this.form).then(res=>{
                        this.$message.success(res.data.message);
                        this.open=false;
                        this.findPage();
                    });
                }else {
                    this.$ajax.post('/food/update/blood',this.form).then(res=>{
                        console.log(this.form.id,"asssss")
                        console.log(this.form,"11")
                        this.$message.success(res.data.message);
                        this.open=false;
                        this.findPage();
                    });

                }

            });

        }

    }

}
</script>
<style scoped>

</style>
